<template>
  <div class="container">
    <TitleBox></TitleBox>  
    <div class="no-content-box flex-box">
      <div class="main">
        <p>您还未关注任何专家</p>
        <button @click="$router.push('/zhuanjia')">查看专家列表</button>
      </div>
    </div>
    <div class="main">
      <div class="main-container">
        <div class="doctor-list doctor-list-mq">
          <ul>
            <li @click="$router.push('/zhuanjiaDetail')">
              <div class="touxiang"><img src="../assets/img/tx-a001.jpg"></div>
              <div class="name">
                <h4>侯永平 <span><svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-wenzheng-doctor"></use>
                  </svg></span></h4>
                <p>深圳红十字会医院儿科主治</p>
              </div>
              <div class="price">
                <p>20元提问</p>
              </div>
            </li>
            <li @click="$router.push('/zhuanjiaDetail')">
              <div class="touxiang"><img src="../assets/img/tx-a001.jpg"></div>
              <div class="name">
                <h4>侯永平 <span><svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-wenzheng-doctor"></use>
                  </svg></span></h4>
                <p>深圳红十字会医院儿科主治</p>
              </div>
              <div class="price">
                <p>20元提问</p>
              </div>
            </li>
            <li @click="$router.push('/zhuanjiaDetail')">
              <div class="touxiang"><img src="../assets/img/tx-a001.jpg"></div>
              <div class="name">
                <h4>侯永平 <span><svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-wenzheng-doctor"></use>
                  </svg></span></h4>
                <p>深圳红十字会医院儿科主治</p>
              </div>
              <div class="price">
                <p>20元提问</p>
              </div>
            </li>
            <li @click="$router.push('/zhuanjiaDetail')">
              <div class="touxiang"><img src="../assets/img/tx-a001.jpg"></div>
              <div class="name">
                <h4>侯永平 <span><svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-wenzheng-doctor"></use>
                  </svg></span></h4>
                <p>深圳红十字会医院儿科主治</p>
              </div>
              <div class="price">
                <p>20元提问</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import TitleBox from '../components/TitleBox.vue'
export default {
  name: 'home',
  data() {
    return {
      lists: ''
    }
  },
  components: {
    TitleBox
  },
  computed: {},
  methods: {},
  mounted() {}
}
</script>
<style lang="scss" scoped>
.doctor-list {
  width: 100%;
  padding-left: r(15);
  padding-right: r(15);
  box-sizing: border-box;
  border-bottom: #f7f7f7 10px solid;
  padding-top: r(6);
  .list-title {
    width: 100%;
    border-bottom: 1px solid #eee;
    font-size: r(12);
    color: #999999;
    line-height: r(36);
  }
  ul {
    display: block;
    overflow: hidden;
    width: 100%;
    li {
      width: 100%;
      float: left;
      border-bottom: 1px solid #eee;
      &:last-child {
        border-bottom: none;
      }
      .touxiang {
        width: r(40);
        height: r(40);
        margin-top: r(22);
        margin-right: r(15);
        border-radius: 100px;
        float: left;
        overflow: hidden;
        img {
          width: 100%;
        }
      }
      .name {
        width: r(188);
        height: r(84);
        float: left;
        h4 {
          font-size: r(16);
          line-height: r(25);
          margin-top: r(20);
          margin-bottom: r(6);
          span {
            display: inline-block;
            width: r(16);
            height: r(16);
            border-radius: 100px;
            // background: -webkit-linear-gradient(left, #86D1FC , #4EA4F7); /* Safari 5.1 - 6.0 */
            // background: linear-gradient(right, #86D1FC , #4EA4F7); /* 标准的语法 */
            color: #fff;
            line-height: r(20);
            margin-left: r(2);
            font-size: r(14);
            text-align: center;
            position: relative;
            top: r(2);
            img {
              width: 100%;
            }
          }
        }
        p {
          font-size: r(11);
          color: #999999;
        }
      }
      .price {
        float: right;
        width: r(90);
        p {
          height: r(30);
          width: 100%;
          border-radius: 100px;
          margin-top: r(25);
          text-align: center;
          line-height: r(30);
          color: #fff;
          font-size: r(14);
          display: block;
          background: -webkit-linear-gradient(left, #4ea4f7, #86d1fc); /* Safari 5.1 - 6.0 */
          background: linear-gradient(right, #4ea4f7, #86d1fc);
          /* 标准的语法 */
        }
      }
    }
  }
}
.no-content-box {
  max-width: 750px;
  margin: 0 auto;
  height: r(200);
  border-bottom: 1px solid #f7f7f7;
  border-bottom-width: r(10);
  .main {
    width: auto;
    text-align: center;
    font-size: r(16);
    padding: 0;
    p {
      display: block;
      color: #999999;
    }
    button {
      display: inline-block;
      border: 1px solid #6dbbfe;
      @include setPm(padding, 6, 12, 6, 12);
      background: none;
      color: #6dbbfe;
      margin-top: r(20);
      border-radius: 40px;
    }
  }
}
</style>
